import QtQuick
import FluentUI
import QtQuick.Controls

// 转化详细
FluRectangle {
    radius: [25, 25, 25, 25]
    width: mainWindow.width * 0.53
    height: mainWindow.height * 0.47 - mainWindow.width * 0.02
    color: "#FFFFFF"

    Text {
        x: 25
        y: parent.height * 0.03
        text: "转化详细"
        font.pointSize: 9 * fontSizeFactor
        font.family: "MiSans"
        font.weight: Font.DemiBold
        color: "#0A1629"
    }

    Column {
        anchors.fill: parent

        // 占位
        Rectangle {
            width: parent.width
            height: parent.height * 0.12
            color: "transparent"
        }

        // 通知
        FluRectangle {
            width: parent.width * 0.93
            height: parent.height * 0.1
            anchors.horizontalCenter: parent.horizontalCenter
            color: "#F9FBFF"
            radius: [10, 10, 10, 10]

            Row {
                anchors.fill: parent

                // 占位
                Rectangle {
                    width: parent.width * 0.02
                    height: parent.height
                    color: "transparent"
                }

                FluImage {
                    anchors.verticalCenter: parent.verticalCenter
                    height: parent.height * 0.5
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/Speaker.png"
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.02
                    height: parent.height
                    color: "transparent"
                }

                Text {
                    text: "设置个人阶段性目标，有助于提高转化率"
                    font.pointSize: 9 * fontSizeFactor
                    font.family: "MiSans"
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#718096"
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.02
                    height: parent.height
                    color: "transparent"
                }

                FluTextButton {
                    text: "设置阶段性目标"
                    font.pointSize: 9 * fontSizeFactor
                    font.family: "MiSans"
                    textColor: "#3F8CFF"
                    anchors.verticalCenter: parent.verticalCenter
                    onClicked: {
                    }
                }
            }
        }

        // 占位
        Rectangle {
            width: parent.width
            height: parent.height * 0.05
            color: "transparent"
        }

        // 转化数据
        FluRectangle {
            width: parent.width * 0.93
            height: parent.height * 0.5
            anchors.horizontalCenter: parent.horizontalCenter
            color: "transparent"

            // 转化图表
            Row {
                anchors.fill: parent
                spacing: parent.width * 0.018

                // 左边矩形图
                FluRectangle {
                    width: parent.width * 0.382
                    height: parent.height
                    color: "transparent"

                    Column {
                        anchors.fill: parent
                        FluRectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "#EBF3FF"
                            radius: [10, 10, 10, 10]
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        FluRectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                            Row {
                                anchors.fill: parent
                                // 占位
                                Rectangle {
                                    width: parent.width * 0.35
                                    height: parent.height
                                    color: "transparent"
                                }
                                FluImage {
                                    anchors.verticalCenter: parent.verticalCenter
                                    height: parent.height * 0.45
                                    fillMode: Image.PreserveAspectFit
                                    source: "qrc:/image/image/DownArrow.png"
                                }
                                // 占位
                                Rectangle {
                                    width: parent.width * 0.05
                                    height: parent.height
                                    color: "transparent"
                                }
                                Text {
                                    anchors.verticalCenter: parent.verticalCenter
                                    text: "78.00%"
                                    font.pointSize: 9 * fontSizeFactor
                                    font.family: "MiSans"
                                    color: "#0A1629"
                                }
                            }
                        }
                        FluRectangle {
                            width: parent.width * 0.78
                            height: parent.height * 0.2
                            color: "#B8CFFF"
                            radius: [10, 10, 10, 10]
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        FluRectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                            Row {
                                anchors.fill: parent
                                // 占位
                                Rectangle {
                                    width: parent.width * 0.35
                                    height: parent.height
                                    color: "transparent"
                                }
                                FluImage {
                                    anchors.verticalCenter: parent.verticalCenter
                                    height: parent.height * 0.45
                                    fillMode: Image.PreserveAspectFit
                                    source: "qrc:/image/image/DownArrow.png"
                                }
                                // 占位
                                Rectangle {
                                    width: parent.width * 0.05
                                    height: parent.height
                                    color: "transparent"
                                }
                                Text {
                                    anchors.verticalCenter: parent.verticalCenter
                                    text: "48.24%"
                                    font.pointSize: 9 * fontSizeFactor
                                    font.family: "MiSans"
                                    color: "#0A1629"
                                }
                            }
                        }
                        FluRectangle {
                            width: parent.width * 0.4824
                            height: parent.height * 0.2
                            color: "#568CFB"
                            radius: [10, 10, 10, 10]
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }

                // 右边详细信息
                FluRectangle {
                    width: parent.width * 0.6
                    height: parent.height
                    color: "transparent"
                    Column {
                        anchors.fill: parent
                        FluRectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                            Row {
                                anchors.fill: parent
                                spacing: parent.width * 0.02
                                FluRectangle {
                                    width: parent.width * 0.35
                                    height: parent.height
                                    color: "transparent"
                                    Row {
                                        anchors.fill: parent
                                        spacing: parent.width * 0.05
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "1"
                                            font.pointSize: 9 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#3F8CFF"
                                        }
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "刷题训练"
                                            font.pointSize: 9 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#0A1629"
                                        }
                                        // 占位
                                        Rectangle {
                                            width: parent.width * 0.15
                                            height: parent.height
                                            color: "transparent"
                                        }
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "100%"
                                            font.pointSize: 12 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#0A1629"
                                        }
                                    }
                                }
                                // 占位
                                Rectangle {
                                    width: parent.width * 0.08
                                    height: parent.height
                                    color: "transparent"
                                }
                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "访问次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "90"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }

                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "总计次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "150"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }

                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "日均题数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "10"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }
                            }
                        }
                        //占位
                        Rectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                        }
                        FluRectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                            Row {
                                anchors.fill: parent
                                spacing: parent.width * 0.02

                                FluRectangle {
                                    width: parent.width * 0.35
                                    height: parent.height
                                    color: "transparent"
                                    Row {
                                        anchors.fill: parent
                                        spacing: parent.width * 0.05
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "2"
                                            font.pointSize: 9 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#3F8CFF"
                                        }
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "面试训练"
                                            font.pointSize: 9 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#0A1629"
                                        }
                                        // 占位
                                        Rectangle {
                                            width: parent.width * 0.15
                                            height: parent.height
                                            color: "transparent"
                                        }
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "78%"
                                            font.pointSize: 12 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#0A1629"
                                        }
                                    }
                                }
                                // 占位
                                Rectangle {
                                    width: parent.width * 0.08
                                    height: parent.height
                                    color: "transparent"
                                }
                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "访问次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "30"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }

                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "总计次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "20"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }

                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "日均次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "10"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }
                            }
                        }

                        //占位
                        Rectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                        }
                        FluRectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                            Row {
                                anchors.fill: parent
                                spacing: parent.width * 0.02

                                FluRectangle {
                                    width: parent.width * 0.35
                                    height: parent.height
                                    color: "transparent"
                                    Row {
                                        anchors.fill: parent
                                        spacing: parent.width * 0.05
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "2"
                                            font.pointSize: 9 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#3F8CFF"
                                        }
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "完成训练"
                                            font.pointSize: 9 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#0A1629"
                                        }
                                        // 占位
                                        Rectangle {
                                            width: parent.width * 0.15
                                            height: parent.height
                                            color: "transparent"
                                        }
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: "48%"
                                            font.pointSize: 12 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#0A1629"
                                        }
                                    }
                                }
                                // 占位
                                Rectangle {
                                    width: parent.width * 0.08
                                    height: parent.height
                                    color: "transparent"
                                }
                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "访问次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "30"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }

                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "总计次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "20"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }

                                FluRectangle {
                                    width: parent.width * 0.15
                                    height: parent.height
                                    color: "transparent"
                                    Column {
                                        anchors.fill: parent
                                        Text {
                                            text: "日均次数"
                                            font.pointSize: 8 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                        Text {
                                            text: "10"
                                            font.pointSize: 10 * fontSizeFactor
                                            font.family: "MiSans"
                                            color: "#7D8592"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        // 占位
        Rectangle {
            width: parent.width
            height: parent.height * 0.05
            color: "transparent"
        }
        // 转化等级
        FluRectangle {
            width: parent.width * 0.93
            height: parent.height * 0.13
            anchors.horizontalCenter: parent.horizontalCenter
            color: "transparent"
            Row {
                anchors.fill: parent
                Text {
                    text: "转化等级"
                    font.pointSize: 9 * fontSizeFactor
                    font.family: "MiSans"
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#718096"
                }
                // 占位
                Rectangle {
                    width: parent.width * 0.02
                    height: parent.height
                    color: "transparent"
                }
                FluRectangle {
                    width: parent.width * 0.2
                    height: parent.height
                    color: "transparent"
                    Row {
                        anchors.fill: parent
                        FluRectangle {
                            width: parent.width * 0.161
                            height: parent.width * 0.161
                            color: "#FF9900"
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        // 占位
                        Rectangle {
                            width: parent.width * 0.0325
                            height: parent.height
                            color: "transparent"
                        }
                        FluRectangle {
                            width: parent.width * 0.161
                            height: parent.width * 0.161
                            color: "#FF9900"
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        // 占位
                        Rectangle {
                            width: parent.width * 0.0325
                            height: parent.height
                            color: "transparent"
                        }
                        FluRectangle {
                            width: parent.width * 0.161
                            height: parent.width * 0.161
                            color: "#FF9900"
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        // 占位
                        Rectangle {
                            width: parent.width * 0.0325
                            height: parent.height
                            color: "transparent"
                        }
                        FluRectangle {
                            width: parent.width * 0.161
                            height: parent.width * 0.161
                            color: "#E9E9E9"
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        // 占位
                        Rectangle {
                            width: parent.width * 0.0325
                            height: parent.height
                            color: "transparent"
                        }
                        FluRectangle {
                            width: parent.width * 0.161
                            height: parent.width * 0.161
                            color: "#E9E9E9"
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.1
                    height: parent.height
                    color: "transparent"
                }
                FluRectangle {
                    width: parent.width * 0.2
                    height: parent.height
                    color: "transparent"
                    Row {
                        anchors.fill: parent
                        spacing: parent.width * 0.1
                        Text {
                            text: "当前"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            anchors.verticalCenter: parent.verticalCenter
                            color: "#718096"
                        }
                        Text {
                            text: "3"
                            font.pointSize: 22 * fontSizeFactor
                            font.family: "MiSans"
                            font.weight: Font.DemiBold
                            anchors.verticalCenter: parent.verticalCenter
                            color: "#FF9900"
                        }
                        Text {
                            text: "级"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            anchors.verticalCenter: parent.verticalCenter
                            color: "#718096"
                        }
                    }
                }

                // 鼓励语
                Text {
                    text: "继续加油，你离成功不远了！！！"
                    font.pointSize: 9 * fontSizeFactor
                    font.family: "MiSans"
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#718096"
                }
            }
        }
    }
}
